<template>
    <div class="pool">
        <el-tooltip v-for="(item,index) in imgData" :key="index" class="item" effect="dark" :content="item.name" placement="right">
            <div :class="['iconItem',active == index?'active':'']" @click="itemChange(item.name,index)">
                <img draggable="false" :src="item.imgUrl" alt="">
            </div>
        </el-tooltip>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgData: [
                { name: '文本', imgUrl: require('../assets/img/icon_文本.png') },
                { name: '形状', imgUrl: require('../assets/img/icon_形状.png') },
                { name: '图表', imgUrl: require('../assets/img/icon_图表.png') },
                { name: '多媒体', imgUrl: require('../assets/img/icon_多媒体.png') },
                { name: '通用', imgUrl: require('../assets/img/icon_多媒体.png') },
            ],
            active: 0,
        }
    },
    computed: {},
    watch: {},
    methods: {
        itemChange(name, index) {
            this.active = index
            if (name == '文本') {
                this.$store.commit('setTitleName', name)
                this.$store.commit('setPoolName', '')
            } else {
                this.$store.commit('setTitleName', '')
                this.$store.commit('setPoolName', name)
            }
        },
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang='scss' scoped>
.pool {
    width: 19%;
    border-right: 1px solid;
    position: absolute;
    height: 100%;
    padding-top: 20px;
}
.iconItem {
    width: 29px;
    height: 28px;
    text-align: center;
    line-height: 30px;
    margin: 18px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.iconItem:hover {
    background: #595a5a;
}
.active {
    background: #5bc4d6;
}
.active:hover {
    background: #5bc4d6;
}
</style>